<template>
	<view class="phonebind">
		<view class="phonebind-cell"><input type="digit" placeholder="手机号码" v-model="form.phone" /></view>
		<view class="phonebind-cell">
			<input type="digit" placeholder="验证码" v-model="form.code" />
			<button type="primary" size="mini" @click="getCode" v-if="!isSend">获取验证码</button>
			<button size="mini" :disabled="true" v-else>{{counts}}s</button>
		</view>
		<view class="phonebind-btn"><button type="primary" @click="bind" hover-class="">立即绑定</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSend: false,
				counts: 60,
				form: {
					phone: '',
					code: ''
				}
			};
		},
		methods: {
			countDown(){
				var time = setInterval(() => {
					this.counts--
					if(this.counts<1){
						clearInterval(time)
						this.counts = 60
						this.isSend = false
					}
				},1000)
			},
			getCode(){
				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/;
				if(!phoneRexp.test(this.form.phone)){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				let data = {
					phone: this.form.phone,
					login_code: 'login'
				}
				this.$api.PhoneGetCode(data).then(res => {
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 1500
					})
					this.isSend = true
					this.countDown()
				})
			},
			bind(){
				this.$api.NewAppBinding({type: 1,phone: this.form.phone,code: this.form.code}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '绑定成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.phonebind{
		.phonebind-cell{
			display: flex;
			background-color: #FFF;
			border-top: solid 1px #EEE;
			align-items: center;
			padding: 0 20rpx;
			input{
				flex: 1;
				padding: 30rpx 20rpx;
			}
			button{
				padding: 5rpx 20rpx;
			}
		}
		.phonebind-btn{
			padding: 50rpx 75rpx;
			button{
				background-color: #2073F5;
				font-size: 32rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 40rpx;
			}
		}
	}
</style>
